<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="defaultBack"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ pageTitle }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content
  [scrollEvents]="true"
  (ionScroll)="handleScroll($event)"
  (ionScrollEnd)="handleScrollEnd()"
  class="ion-padding with-widgets"
>
  <ion-infinite-scroll
    id="scroller"
    [disabled]="infiniteStatus !== 1"
    position="top"
    threshold="1000"
    (ionInfinite)="doInfinite($event)"
  >
    <ion-infinite-scroll-content
      loadingSpinner="lines"
    ></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>

  <div id="container">
    <div id="template"></div>
  </div>

  <ng-container *ngIf="!loading">
    <div id="bottom-div"></div>
    <p
      *ngIf="websocketStatus === 'reconnecting'"
      class="ion-text-center loading-dots"
    >
      <ion-text color="success">Reconnecting</ion-text>
    </p>
    <p
      *ngIf="websocketStatus === 'disconnected'"
      class="ion-text-center loading-dots"
    >
      <ion-text color="warning">Waiting for network connectivity</ion-text>
    </p>
    <div
      [ngStyle]="{
        position: 'fixed',
        bottom: '96px',
        right: isOnBottom ? '-52px' : '30px',
        'background-color': 'var(--ion-color-medium)',
        'border-radius': '100%',
        transition: 'right 0.25s ease-out'
      }"
    >
      <ion-button
        style="
          width: 50px;
          height: 50px;
          --padding-start: 0px;
          --padding-end: 0px;
          --border-radius: 100%;
        "
        color="dark"
        (click)="scrollToBottom(); autoScroll = true"
        strong
      >
        <ion-icon name="chevron-down"></ion-icon>
      </ion-button>
    </div>
  </ng-container>
</ion-content>

<ion-footer class="with-widgets">
  <ion-toolbar>
    <div class="inline ion-padding-start">
      <ion-checkbox [(ngModel)]="autoScroll" color="dark"></ion-checkbox>
      <p class="ion-padding-start">Autoscroll</p>
    </div>
    <ion-button
      *ngIf="!loading"
      slot="end"
      class="ion-padding-end"
      fill="clear"
      strong
      (click)="download()"
    >
      Download
      <ion-icon slot="end" name="download-outline"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-footer>
